<template>
  <div class="aalyfor">
    <div class="left">
      <SubtTitle
        name="会诊申请"
        icon-name="operate"
        has-icon
        style="margin-bottom: 10px"
      ></SubtTitle>
      <el-form ref="formrules" :model="form" :rules="rules">
        <h4 style="font-size: 0.06005rem">会诊级别</h4>
        <el-form-item prop="type">
          <el-radio-group v-model="form.type">
            <el-radio label="普通会诊" @change="ChangeconsType(1)" />
            <el-radio label="急会诊" @change="ChangeconsType(2)" />
          </el-radio-group>
        </el-form-item>
        <h4 style="line-height: 36px; font-size: 0.06005rem">申请人手机号</h4>
        <el-form-item prop="phone">
          <el-input
            placeholder="请输入手机号"
            v-model="form.phone"
            @change="Changephone"
          />
        </el-form-item>
        <h4 style="line-height: 36px; font-size: 0.06005rem">申请理由</h4>
        <el-form-item>
          <el-input
            autosize
            placeholder="请填写申请理由"
            type="textarea"
            :rows="6"
            maxlength="100"
            v-model="form.reasonApplication"
          ></el-input>
        </el-form-item>
      </el-form>
      <el-button class="uploadStyle" @click="uploadfiles">上传影像 &nbsp;</el-button>
      <span v-if="filesNum" style="color:#98c379">已选择{{filesNum}}个文件</span>
      <el-button class="synchronization" disabled @click="uploadfiles"
        >同步</el-button
      >

      <input
      
        type="file"
        accept="application/dicom"
        v-show="false"
        ref="fileInput"
        multiple
        @change="handleDICOMSelect"
      />
      <div class="patmsg">
        <div class="pat-info">
          <img src="@/assets/home/avtar.png" alt="" class="avtar" />
          <div class="msg">
            <div>{{ PatientInformation.patientInforList.patientName }}</div>
            <div>
              {{
                PatientInformation.patientInforList.gender == "1" ? "男" : "女"
              }}
            </div>
            <div>{{ PatientInformation.patientInforList.patientAge }}</div>
            <div>{{ PatientInformation.patientInforList.patRank }}</div>
            <div>{{ PatientInformation.patientInforList.office }}</div>
          </div>
        </div>
        <div class="diagnose">
          {{ patData.diagnose }}
        </div>
        <div class="footer">
          主治医师：{{ PatientInformation.patientInforList.doctor }}
        </div>
        <div class="footer">
          既往史：{{ PatientInformation.patientInforList.history }}
        </div>
        <div class="footer">
          体征：{{ PatientInformation.patientInforList.physicalData }}
        </div>

        <div class="footer">
          诊断：{{ PatientInformation.patientInforList.diagnosis }}
        </div>
      </div>
      <div class="export">
        <div class="title">邀请专家</div>
        <div class="data">
          <div
            class="list"
            v-for="(item, index) in showExportlist"
            :key="index"
          >
            {{ item.expertName }}
          </div>
        </div>
      </div>
    </div>
    <div class="box">
      <div class="center">
        <div class="tizheng">
          <SubtTitle
            name="体征数据"
            icon-name="operate"
            has-icon
            style="margin-bottom: 10px"
          ></SubtTitle>
          <humanMonitor
            :childMessage="PatientInformation.patientInforList.patientId"
          ></humanMonitor>
        </div>

        <div class="yyqk">
          <medication
            :childMessage="PatientInformation.patientInforList.patientId"
          ></medication>
        </div>
      </div>

      <div class="zjlb">
        <SubtTitle
          name="专家列表"
          icon-name="operate"
          has-icon
          style="margin-bottom: 10px"
        ></SubtTitle>

        <exportList @updateMessage="handleMessageUpdate"></exportList>

        <div class="box-bottom">
          <div class="btn">
            <div class="cancel" @click="onCancel">取消</div>
            <div class="apply" @click="onApply">申请</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, toRefs, onBeforeMount, onMounted, computed } from "vue";
import SubtTitle from "@/components/Title/subtTitle.vue";
import svgIcon from "@/components/Svg/svg-icon.vue";
import humanMonitor from "./components/humanMonitor.vue";
import medication from "./components/medication.vue";
import exportList from "./components/exportList.vue";
import { useRouter, useRoute } from "vue-router";
import { upload, addMsg } from "../../api/index.js";
import { useWebSocketStore } from "@/store/websocket.js";
const router = useRouter();
const route = useRoute();
import usePatientInformation from "@/store/usePatientInformation.js";
import dayjs from 'dayjs'
const PatientInformation = usePatientInformation();
const store = useWebSocketStore();
// 申请会诊条件校验
const form = reactive({
  type: "",
  startTime: "",
  phone: "",
  reasonApplication: "",
 

});
// 条件校验
const rules = reactive({
  type: [{ required: true, message: "请选择会诊类型", trigger: "change" }],
  phone: [
    { required: true, message: "请输入申请人手机号", trigger: "change" },
    { pattern: /^1[3-9]\d{9}$/, message: "请输入合法的手机号" },
  ],
});
// 显示被邀请的专家
const showExportlist = ref([]);
const handleMessageUpdate = (newMessage) => {
  console.log(newMessage, "222");
  showExportlist.value = newMessage;
  console.log(newMessage, "2rrr22");
};
const expertIds = computed(() =>
  showExportlist.value.map((expert) => expert.expertId)
);

// 接受患者数据
const patData = ref(route.query);
onMounted(() => {
  console.log(patData.value);
});
// 上传影像
const fileInput = ref();
const dicomList = ref([]);
const uploadfiles = (e) => {
  fileInput.value.click();
  
};
const filesNum = ref()
const handleDICOMSelect = async (e) => {
  console.log(e.target.files, "uuuu");
  filesNum.value = e.target.files.length
  dicomList.value = Array.from(e.target.files);
};

// 申请
const type = ref("dicom");
const message = ref("消息");
const onApply = () => {
  // 文件上传
  const formData = new FormData();
  dicomList.value.forEach((file) => {
    formData.append("files", file);
  });
  formData.append("patId", PatientInformation.patientInforList.patientId);
  formData.append("type", type.value);
  upload(formData).then((res) => {
    addMsg({
      patId: PatientInformation.patientInforList.patientId, //患者id
      patName: PatientInformation.patientInforList.patientName, //患者姓名
      type: "dicom", //资料上传类型
      hzType: form.type, //会诊类别
      specialistIdFrom: JSON.parse(localStorage.getItem("user")).id, //当前专家id
      specialistIdToList: expertIds.value, //受邀专家id
      applyMsg: form.reasonApplication, //原因
      phone:form.phone,
       sqtime: dayjs().format('YYYY-MM-DD HH:mm:ss')

    }).then((res) => {
      store.sendMessage(form.reasonApplication)
      router.push("/RequestConsultation");
    });
  });
};

// 取消
const onCancel = () => {
  router.push("/patientCard");
};

onMounted(() => {

  console.log(dayjs().format('YYYY-MM-DD HH:mm:ss'));
  
});


</script>
<style scoped lang="scss">
@mixin bg() {
  padding: 10px;
  border-radius: 12px;
  background: rgba(33, 33, 33, 0.41);
  box-shadow: 0px 0px 10.2px 1px rgba(148, 148, 148, 0.13) inset;
  background: linear-gradient(
    112.04deg,
    rgba(67, 213, 199, 0.12) 1.24%,
    rgba(82, 80, 80, 0) 64.01%
  );
  border: 1px solid;
  border-image-source: linear-gradient(
    130.78deg,
    rgba(0, 0, 0, 0.1) 55.65%,
    rgba(67, 213, 199, 0.2) 94.34%
  );
}
.aalyfor {
  display: flex;
  justify-content: space-between;
  height: calc(100vh - 120px);

  .left {
    width: 20%;
    @include bg();
    height: calc(100vh - 120px);
    padding: 14px;
    overflow: hidden;

    .patmsg {
      @include bg();
      height: 28%;
      margin-bottom: 20px;
      .pat-info {
        display: flex;
        .msg {
          margin-left: 10px;
          display: flex;
          justify-content: center;
          align-items: center;
          div {
            margin-right: 5px;
            color: #fff;
            font-size: 18px;
            font-style: normal;
            font-weight: 700;
            line-height: 24px; /* 100% */
          }
        }
      }
      .diagnose {
        color: #fff;
        font-size: 18px;
        font-style: normal;
        font-weight: 700;
        line-height: 24px; /* 100% */
        margin-top: 20px;
      }
      .footer {
        color: #fff;
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: 24px; /* 100% */
        margin-top: 8px;
      }
    }
    .export {
      @include bg();
      height: 30%;
      .title {
      }
      .data {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* 一行显示两个元素 */
        gap: 10px;
        .list {
          margin: 2px 0px;
          @include bg();
        }
      }
    }
  }
  .box {
    width: 79%;
    display: flex;
    justify-content: space-between;

    .center {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 30%;
      height: calc(100vh - 120px);
      @include bg();
      .tizheng {
        @include bg();
      }

      .yyqk {
        @include bg();
        height: 260px;
      }
    }
    .zjlb {
      width: 69%;
      padding: 15px;
      height: calc(100vh - 254px);
    }

    .box-bottom {
      @include bg();
      height: 80px;
      margin-top: 20px;
      display: flex;
      align-items: center;
      justify-content: right;

      .btn {
        display: flex;
        .cancel {
          width: 120px;
          height: 40px;
          line-height: 40px;
          text-align: center;
          font-size: 16px;
          border-radius: 10px;
          background: #f3124a;
          background: linear-gradient(
            112.04deg,
            rgba(190, 140, 148, 0.933) 33.24%,
            rgba(206, 135, 87, 0.808) 100%
          );
          cursor: pointer;

          margin-right: 20px;
        }
        .apply {
          width: 120px;
          line-height: 40px;
          height: 40px;
          text-align: center;
          cursor: pointer;
          font-size: 16px;
          border-radius: 10px;
          background: linear-gradient(
            112.04deg,
            rgba(100, 128, 113, 0.933) 33.24%,
            rgba(157, 227, 212, 0.813) 100%
          );
        }
      }
    }
  }
}

:deep(.el-input__wrapper) {
  background: #000;
}
:deep(.el-textarea__inner) {
  background: #000;
}
:deep(.el-table th.el-table__cell) {
  background: #25413f;
  font-size: 14px;

  color: #ffffffcc;
}
:deep(.el-table__body-wrapper) {
  background: #ffffff03 !important;
  font-size: 13px;
}
:deep(.el-table) {
  background: #ffffff03;
}
:deep(.el-table__body-wrapper) {
  background: #ffffff03;
}
:deep(.el-table tr) {
  background: #ffffff0f;
}
:deep(
    .el-table--striped
      .el-table__body
      tr.el-table__row--striped
      td.el-table__cell
  ) {
  background: #ffffff0f;
}
:deep(.el-radio__label) {
  color: #fff;
  font-size: 16px;
}
:deep(.el-input__inner) {
  color: #fff;
}

:deep(.el-textarea__inner) {
  color: #fff;
}
.uploadStyle {
  background: linear-gradient(
    112.04deg,
    rgba(100, 128, 113, 0.933) 33.24%,
    rgba(157, 227, 212, 0.813) 100%
  );
  border: none;
  color: #fff;
  margin-bottom: 5px;
}
.synchronization {
  background: linear-gradient(
    112.04deg,
    rgba(100, 128, 113, 0.933) 63.24%,
    rgba(157, 227, 212, 0.813) 100%
  );
  border: none;
  color: #fff;
  margin-bottom: 5px;
}

/* 当按钮处于禁用状态时 */
:deep(.el-button.is-disabled) {
  background-color: #b12810 !important; /* 例如，设置为浅灰色 */
  color: #c0c4cc !important; /* 例如，设置为灰色 */
  color: #fff;
  border: none;
  float: right;
}
</style>
